var createSpot = function(opts) {
	var defaultOpts = {
		sn: 1, // number of spots
		type: 1,  // 1: condition, 2: time, 3: action
		pos_x: 50,  // default first spot position related X
		pos_y: 50, // default first spot position related Y
		groups: 0, // belongs to which group
		from: 0, // place where to create spot
		quickTrigger: '' // execute functions after the creation
	};
	
	var options = $.extend(defaultOpts, opts);
	
	var loc = parseInt(options.type);
	var group = 1;
	var index = 1;
	
	if(options.sn > 1) {
		var _from = options.from;
		var $from = $(".took-canvas").find("div.balloon-spot[data-index='"+_from+"']");
		var from_type = $from.data("type");
		var from_group = $from.data("group");
		
		var from_x = $from.css("left").replace("px", "");
		var from_y = $from.css("top").replace("px", "");
		var from_width = $from.css("width").replace("px", "");
		var from_height = $from.css("height").replace("px", "");
		
		// the default position
		var defaultX = from_x / 1 + from_width / 1;
		var defaultY = from_y / 1;
		var defaultCoord = "(" + defaultX + "," + defaultY + ")";
		options.pos_x = defaultX;
		
		var y = 50;
		$(".took-canvas").find("div.balloon-spot[data-from='"+_from+"']").each(function(){
			var c_y = $(this).css("top").replace("px", "");
			if(c_y / 1 > y) {
				y = c_y;
			}
		});
		
		var meLen = $(".took-canvas").find("div.balloon-spot[data-from='"+_from+"']").length;
		var offsetY = defaultY / 1 + from_height * meLen; 
		if(y > 50) {
			offsetY = y / 1 + from_height / 1;
		}
		
		var toCoord = "(" + defaultX + "," + offsetY + ")";
		var spotsLen = $(".took-canvas").find("div.balloon-spot[data-coord='"+toCoord+"']").length;
		// there is a spot in the position
		if(spotsLen == 1) {
			var invaded = new Array();
			var steps = 0;
			// no sub spots means "I'm be invaded.'"
			if(meLen == 0) {
				// when being invaded, calculate the steps
				var t_froms = $(".took-canvas").find("div.balloon-spot[data-coord='"+toCoord+"']").data("from");
				var to_conds = "(" + defaultX + ",";
				$(".took-canvas").find("div.balloon-spot[data-coord*='"+to_conds+"'][data-from='"+t_froms+"']").each(function(){
					var $_cur = $(this);
					var cur_y = $_cur.css("top").replace("px", "");
					if(cur_y > offsetY) {
						steps++;
					}
				});
				steps++;
				options.pos_y = offsetY / 1 + from_height * steps;
				$(".took-canvas").find("div.balloon-spot").each(function(){
					var $cur = $(this);
					var cur_x = $cur.css("left").replace("px", "");
					var cur_y = $cur.css("top").replace("px", "");
					var cur_index = $cur.data("index");
					var coord = $cur.data("coord");
					if(cur_y >= offsetY && cur_x <= defaultX) {
						if(coord != toCoord && $cur.data("from") !=  t_froms) {
							invaded.push(cur_index);
						}
					}
				});
			} else {
				options.pos_y = offsetY;
				$(".took-canvas").find("div.balloon-spot").each(function(){
					var $cur = $(this);
					var cur_x = $cur.css("left").replace("px", "");
					var cur_y = $cur.css("top").replace("px", "");
					var cur_index = $cur.data("index");
					if(cur_y >= offsetY) {
						invaded.push(cur_index);
					}
				});
			}
			moveInvadedSpots(invaded, steps);
			
		} else {
			options.pos_y = offsetY;
		}
		
		
		if(from_type == "3") {
			var groups = $(".took-canvas").find("div.balloon-spot[data-type='1']").length;
			group = groups / 1 + 1;
		} else  {
			group = from_group;
		}
	}
	
	options.groups = group;
	drawContent('', options);
	
	var fun = options.quickTrigger;
	if(typeof fun == "function") {
		fun(options);
	}
};

var drawContent = function(id, options) {
	var curType = options.type;
	var curGroup = options.groups;
	
	var keywords = "";
	var texts = "";
	if(curType == "1") {
		keywords = "-cond";
		texts = "条件";
	} else if(curType == "2") {
		keywords = "-time";
		texts = "时间";
	} else if(curType == "3") {
		keywords = "-act";
		texts = "动作";
	}
	
	var cls = "block" + keywords;
	var umbrella = "umbrella" + keywords;
	var ubk = "umbrella-bk" + keywords;
	var s_label = "daisy-plus" + keywords;
	var s_bk = "daisy-bk" + keywords;
	var mo = "mo" + keywords;
	var m_bk = "mo-bk" + keywords;
	var s_view = "daisy-view" + keywords;
	var coord = "(" + options.pos_x + "," + options.pos_y + ")";
	
	var pos = "top:"+options.pos_y+"px; left:" + options.pos_x +"px;";
	var content = "<div class='balloon-spot "+ cls +"' id='" + id + "' style='"+pos+"' data-group='"+curGroup+"' data-type='"+curType+"' data-index='"+options.sn+"' data-coord='"+coord+"' data-from='"+options.from+"'>"
						  + "<div class='main-balloon "+ubk+"'><label class='"+umbrella+"'><span>"+texts+"</span></label></div>"
						  + "<div class='s-balloon spot-cond "+s_bk+"' style='display:none;' data-pos='1'><label class='"+s_label+"' data-tag='1' data-type='1'><span>条件</span></label></div>"
						  + "<div class='s-balloon spot-time "+s_bk+"' style='display:none;'  data-pos='2'><label class='"+s_label+"' data-tag='1' data-type='2'><span>时间</span></label></div>"
						  + "<div class='s-balloon spot-act "+s_bk+"' style='display:none;'  data-pos='3'><label class='"+s_label+"' data-tag='1' data-type='3'><span>动作</span></label></div>"
						  + "<div class='s-balloon spot-view "+s_bk+"' style='display:none;'  data-pos='4'><label class='"+s_view+"' data-tag='2'><span>预览</span></label></div>"
						  + "</div>";
	$(".took-canvas").append(content);
};

var moveInvadedSpots = function(invadeArr, steps) {
	for(var spot in invadeArr) {
		var index = invadeArr[spot];
		var $me = $(".took-canvas").find("div.balloon-spot[data-index='"+index+"']");
		var _from = $me.data("from");
		var pos_y = $me.css("top").replace("px", "");
		var height = $me.css("height").replace("px", "");
		
		var offset = 0;
		if(steps == 0) {
			offset = pos_y / 1 + height / 1;
		} else {
			offset = pos_y / 1 + height * steps;
		}
		$me.css("top", offset + "px");
		
		clearLine({
			from: _from,
			to: index
		});
		drawLine({
			from: _from,
			to: index
		});
	}
};

var clearLine = function(opts) {
	var defaultOpts = {
		from: 1,  // spot start place
		to: 2 // spot end place
	};
	var options = $.extend(defaultOpts, opts);
	var $from = $(".took-canvas").find("div.balloon-spot[data-index='"+options.from+"']");
	var $line = $from.find("div[data-from='"+options.from+"'][data-to='"+options.to+"']");
	$line.remove();
}

var drawLine = function(opts) {
	var defaultOpts = {
		from: 1,  // spot start place
		to: 2 // spot end place
	};
	
	var options = $.extend(defaultOpts, opts);
	
	var $from = $(".took-canvas").find("div.balloon-spot[data-index='"+options.from+"']");
	var $to = $(".took-canvas").find("div.balloon-spot[data-index='"+options.to+"']");
	
	var from_x = $from.css("left").replace("px", "");
	var from_y = $from.css("top").replace("px", "");
	var to_x = $to.css("left").replace("px", "");
	var to_y = $to.css("top").replace("px", "");
	
	var width = $from.css("width").replace("px", "");
	var height = $from.css("height").replace("px", "");
	var type = $from.data("type");
	var keywords = type == "1" ? "-cond" : type == "2" ? "-time" : "-act";
	
	var color_line = "line-color" + keywords;
	var color_block = "block-color" + keywords;
	var offsetX = to_x / 1 - from_x / 1;
	var offsetY = to_y  / 1 - from_y / 1;
	// offsetY is 0, draw the line in the from spot
	if(offsetY == 0) {
		var cur_x = 0;
		var cur_y = height / 2;
		var pos = "left:" + cur_x + "px; top:" + cur_y + "px; width:" + offsetX + "px; height:1px;"
		var line = "<div class='spot-line "+color_line+"' style='"+pos+"' data-from='"+options.from+"' data-to='"+options.to+"'></div>";
		$from.find("div:last").after(line);
	} else {
		var cur_x = width / 2 + 50 ;
		var cur_y = height / 2;
		var pos = "left:" + cur_x + "px; top:" + cur_y + "px; width:" + (cur_x - 50) + "px; height:" + offsetY + "px;"
		var line = "<div class='spot-line "+color_block+"' style='"+pos+"' data-from='"+options.from+"' data-to='"+options.to+"'></div>";
		$from.find("div:last").after(line);
	}
}

var drawSemiSpots = function(opts) {
	var defaultOpts = {
		blockId: '',  // whict block to draw spots
		dataList: ''   // data info to draw spots
	};
	var options = $.extend(defaultOpts, opts);
	
	var $canvas = $(".took-panel-list").find("div.took-block-content[data-id='"+options.blockId+"']").find(".took-canvas");
	
	if(options.dataList != '') {
		for(var x in options.dataList) {
			var _cur = options.dataList[x];
			var curId = _cur.id;
			var _from = $canvas.find("div.semi-block[data-id='"+curId+"']").data("from");
			var index = x / 1 + 1;
			drawCurrentSpot(_cur, index, options.blockId);
			if(index >1) {
				drawCurrentLine(_from, index, options.blockId, _cur);
			}
		}
	}
};

var drawCurrentSpot = function(obj, curIndex, blockId) {
	// load the canvas from the block id
	var $canvas = $(".took-panel-list").find("div.took-block-content[data-id='"+blockId+"']").find(".took-canvas");
	var type = obj.type;
	var texts = type == "1" ? "条件" : type == "2" ? "时间" : '动作';
	var keywords = type == "1" ? "-cond" : type == "2" ? "-time" : "-act";
	
	var pos_x = 0;
	var pos_y = 0;
	var pos_from = 0;
	if(curIndex == 1) {
		pos_x = 50;
		pos_y = 50;
	} else {
		var $from = $canvas.find("div.semi-block[data-id='"+obj.parentId+"']");
		pos_from = $from.data("index");
		
		var from_x = $from.css("left").replace("px", "");
		var from_y = $from.css("top").replace("px", "");
		var from_width = $from.css("width").replace("px", "");
		var from_height = $from.css("height").replace("px", "");
		
		var defaultX = from_x / 1 + from_width / 1;
		var defaultY = from_y / 1;
		var defaultCoord = "(" + defaultX + "," + defaultY + ")";
		pos_x = defaultX;
		
		var meLen = $canvas.find("div.semi-block[data-from='"+pos_from+"']").length;
		var offsetY = defaultY / 1 + from_height * meLen;
		
		var toCoord = "(" + defaultX + "," + offsetY + ")";
		var spotsLen = $canvas.find("div.semi-block[data-coord='"+toCoord+"']").length;
		if(spotsLen == 1) {
			var invaded = new Array();
			var steps = 0;
			if(meLen == 0) {
				var t_froms = $canvas.find("div.balloon-spot[data-coord='"+toCoord+"']").data("from");
				var to_conds = "(" + defaultX + ",";
				$canvas.find("div.balloon-spot[data-coord*='"+to_conds+"'][data-from='"+t_froms+"']").each(function(){
					var $_cur = $(this);
					var cur_y = $_cur.css("top").replace("px", "");
					if(cur_y > offsetY) {
						steps++;
					}
				});
				steps++;
				pos_y = offsetY / 1 + from_height * steps;
				$canvas.find("div.semi-block").each(function(){
					var $cur = $(this);
					var cur_x = $cur.css("left").replace("px", "");
					var cur_y = $cur.css("top").replace("px", "");
					var cur_index = $cur.data("index");
					var coord = $cur.data("coord");
					if(cur_y >= offsetY && cur_x <= defaultX) {
						if(coord != toCoord && $cur.data("from") !=  t_froms) {
							invaded.push(cur_index);
						}
					}
				});
				
			} else {
				pos_y = offsetY;
				$canvas.find("div.semi-block").each(function(){
					var $cur = $(this);
					var cur_x = $cur.css("left").replace("px", "");
					var cur_y = $cur.css("top").replace("px", "");
					var cur_index = $cur.data("index");
					var coord = $cur.data("coord");
					if(cur_y >= offsetY) {
						invaded.push(cur_index);
					}
				});
			}
			redrawInvadedSpots(invaded, $canvas, blockId, steps);
		} else {
			pos_y = offsetY;
		}
	}
	
	
	var actived = "";
	if(obj.act) {
		if(obj.act == 1) {
			actived = "-hover";
		}
	}
	
	var pos = "left:"+pos_x + "px; top:" + pos_y + "px;";
	var coord = "(" + pos_x + "," + pos_y + ")";
	var spotContent = "<div class='semi-block' style='"+pos+"' data-coord='"+coord+"' data-from='"+pos_from+"' data-type='"+obj.type+"'  data-index='"+curIndex+"'  data-id='"+obj.id+"'>"
								  + "<div class='semi-balloon bk"+keywords+actived+"'><label class='ucon"+keywords+actived+"'><span>"+texts+"</span></label></div>"
								  + "</div>";
	$canvas.append(spotContent);
}

var redrawInvadedSpots = function(invadeArr, $block, blockId, steps) {
	
	for(var spot in invadeArr) {
		var index = invadeArr[spot];
		var $me = $block.find("div.semi-block[data-index='"+index+"']");
		var _from = $me.data("from");
		var pos_y = $me.css("top").replace("px", "");
		var height = $me.css("height").replace("px", "");
		
		var offset = 0;
		if(steps == 0) {
			offset = pos_y / 1 + height / 1;
		} else {
			offset = pos_y / 1 + height * steps;
		}
		$me.css("top", offset + "px");
		
		clearCurrentLine(_from, index, blockId);
		
		drawCurrentLine(_from, index, blockId);
	}
};

var clearCurrentLine = function(_from, _to, blockId) {
	var $canvas = $(".took-panel-list").find("div.took-block-content[data-id='"+blockId+"']").find(".took-canvas");
	var $from = $canvas.find("div.semi-block[data-index='"+_from+"']");
	var $line = $from.find("div[data-from='"+_from+"'][data-to='"+_to+"']");
	$line.remove();
};


var drawCurrentLine = function(_from, _to, blockId, obj) {
	var $canvas = $(".took-panel-list").find("div.took-block-content[data-id='"+blockId+"']").find(".took-canvas");
	
	var $from;
	if(_from) {
		$from = $canvas.find("div.semi-block[data-index='"+_from+"']");
	} else {
		$from = $canvas.find("div.semi-block[data-id='"+obj.parentId+"']");
	}
	var $to = $canvas.find("div.semi-block[data-index='"+_to+"']");
	
	var from_x = $from.css("left").replace("px", "");
	var from_y = $from.css("top").replace("px", "");
	var to_x = $to.css("left").replace("px", "");
	var to_y = $to.css("top").replace("px", "");
	var from_index = $from.data("index");
	var to_index = $to.data("index");
	
	var width = $from.css("width").replace("px", "");
	var height = $from.css("height").replace("px", "");
	
	var type = $from.data("type");
	var keywords = type == "1" ? "-cond" : type == "2" ? "-time" : "-act";
	var color_line = "line-color" + keywords;
	var color_block = "block-color" + keywords;
	var offsetX = to_x / 1 - from_x / 1;
	var offsetY = to_y  / 1 - from_y / 1;
	// offsetY is 0, draw the line in the from spot
	if(offsetY == 0) {
		var cur_x = 0;
		var cur_y = height / 2;
		var pos = "left:" + cur_x + "px; top:" + cur_y + "px; width:" + offsetX + "px; height:1px;"
		var line = "<div class='spot-line "+color_line+"' style='"+pos+"' data-from='"+from_index+"' data-to='"+to_index+"'></div>";
		$from.find("div:last").after(line);
	} else {
		var cur_x = width / 2 + 50 ;
		var cur_y = height / 2;
		var pos = "left:" + cur_x + "px; top:" + cur_y + "px; width:" + (cur_x - 50) + "px; height:" + offsetY + "px;"
		var line = "<div class='spot-line "+color_block+"' style='"+pos+"' data-from='"+from_index+"' data-to='"+to_index+"'></div>";
		$from.find("div:last").after(line);
	}
}

$(function(){
	
});
